<?xml version="1.0" encoding="UTF-8" ?>

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/templates/general.xhtml">
        
        <ui:define name="title"><h:outputText value="Please Sign Up" /></ui:define>
        <ui:define name="header"><h:outputText value="Please Sign Up" /></ui:define>
        
        <ui:define name="content">
                <h:form id="signUpForm">
                        <p:fieldset styleClass="fieldset" legend="Registration Form">
                                <p:focus />
                                <p:messages id="messages" globalOnly="true" />
                        
                                <h:panelGrid id="regPanelGrid" style="margin: 0 auto; margin-top: 25px; text-align: right" cellspacing="8" columns="3">

                                        <h:panelGroup>
                                                <h:outputText value="First Name:" />
                                                <h:outputText style="color:red" value="*  " />
                                        </h:panelGroup>
                                        <p:inputText id="firstName" label="First Name" value="" required="true" title="Enter your First Name!">
                                                <f:validateLength minimum="2" />
                                                <p:ajax event="keyup" update="firstNameMsg" global="false"/>
                                        </p:inputText>
                                        <h:panelGroup>
                                                <p:message id="firstNameMsg" for="firstName" />
                                                <p:tooltip for="firstName" styleClass="tooltip" showEvent="focus" hideEvent="blur" />
                                        </h:panelGroup>
                                        
                                        <h:panelGroup>
                                                <h:outputText value="Last Name:" />
                                                <h:outputText style="color:red" value="*  " />
                                        </h:panelGroup>
                                        <p:inputText id="lastName" label="Last Name" value="" required="true" title="Enter your Last Name!">
                                                <f:validateLength minimum="2" />
                                                <p:ajax event="keyup" update="lastNameMsg" global="false"/>
                                        </p:inputText>
                                        <h:panelGroup>
                                                <p:message id="lastNameMsg" for="lastName" />
                                                <p:tooltip for="lastName" styleClass="tooltip" showEvent="focus" hideEvent="blur" />
                                        </h:panelGroup>
                                        
                                        <h:panelGroup>
                                                <h:outputText value="User Name:" />
                                                <h:outputText style="color:red" value="*  " />
                                        </h:panelGroup>
                                        <p:inputText id="userName" value="" required="true" label="User Name" title="Enter your User Name!">
                                                <f:validateLength minimum="2" />
                                                <p:ajax event="keyup" update="userNameMsg" global="false"/>
                                        </p:inputText>
                                        <h:panelGroup>
                                                <p:message id="userNameMsg" for="userName" />
                                                <p:tooltip for="userName" styleClass="tooltip" showEvent="focus" hideEvent="blur" />
                                        </h:panelGroup>
                                        
                                        <h:panelGroup>
                                                <h:outputText value="Enter Password:" />
                                                <h:outputText style="color:red" value="*  " />
                                        </h:panelGroup>
                                        <p:password id="pass1" value="" required="true" label="Password" title="Please enter a password!" feedback="true" match="pass2">
                                                <f:validateLength minimum="2" />
                                        </p:password>
                                        <p:message id="pass1Msg" for="pass1" />
                                        
                                        <h:panelGroup>
                                                <h:outputText value="Repeat Password:" />
                                                <h:outputText style="color:red" value="*  " />
                                        </h:panelGroup>
                                        <p:password id="pass2" required="true" label="Password" title="Please enter a password!" />
                                        <p:message id="pass2Msg" for="pass2" />
                                        
                                        <p:commandButton id="backToSignIn" action="backToSignIn" immediate="true" icon="ui-icon-arrowreturnthick-1-w" value="Back to Sign In" />
                                        <p:commandButton id="submitButton" action="SignUp" update="regPanelGrid,messages" icon="ui-icon-check" value="Sign Up" />
                                        
                                </h:panelGrid>
                        </p:fieldset>
                </h:form>
        </ui:define>
        
</ui:composition>
